<template>
  <div class="dra">
    <!-- langtodo -->
    <Drawer
      ref="elDpDrawer"
      :title="$t('productionCenter.table.parameterCheck')"
      :size="'medium'"
      v-bind="$attrs"
      :show-footer="true"
      :showConfirm="false"
      :negativeText="$t('common.button.close')"
      :width="1200"
    >
      <template #footer>
        <div class="footer">
          <n-space>
            <n-button @click="close">{{ $t('common.button.close') }}</n-button>
          </n-space>
        </div>
      </template>
      <div style="padding: 20px">
        <n-tabs
          type="segment"
          animated
          :value="tabsValue"
          class="order-drawer-tabs"
          :on-update:value="tabsChangeFn"
        >
          <n-tab-pane name="detail" :tab="$t('productionCenter.table.detail')">
            <DFDescriptions
              class="order-drawer-descriptions"
              :routeName="'productionCenter'"
              :descriptionsList="descriptionsList"
              :labelWidth="language === 'en' ? 180 : 140"
            />
          </n-tab-pane>
          <n-tab-pane name="parameter" :tab="$t('productionCenter.table.parameter')">
            <DFTable
              :columns="tableColumns"
              :row-key="(row: Recordable) => row.funId"
              ref="crossactionRef"
              :dataSource="crossactionTableList"
              :pagination="false"
              :size="'small'"
              :single-line="false"
              :noDefaultLoad="true"
              :hasIndex="false"
              :maxHeight="'calc(100vh - 240px)'"
              :routeName="'productionCenter'"
            />
          </n-tab-pane>

          <n-tab-pane
            v-if="isOpenUnitOptions"
            name="unitOptions"
            :tab="$t('productionCenter.table.unitOptions')"
          >
            <DFTable
              :columns="tableColumns2"
              :row-key="(row: Recordable) => row.id"
              :dataSource="crossactionTableList2"
              :pagination="false"
              :size="'small'"
              :single-line="false"
              :noDefaultLoad="true"
              :hasIndex="false"
              :maxHeight="'calc(100vh - 240px)'"
              :routeName="'productionCenter'"
            />
          </n-tab-pane>
        </n-tabs>
      </div>
    </Drawer>
  </div>
</template>

<script lang="ts" setup>
  import DFDescriptions from '@/components/DFDescriptions/index.vue';
  import { Drawer } from '@/components/DpDrawer';
  // import { materialParam } from '@/api/wipManagement/productionCenter/productionHomepage';
  import { DFTable } from '@/components/DFTable';
  import { useMixins } from '@/hooks/useMixins';
  import {
    distributeTypeList,
    isSaveByMaterialList,
  } from '@render/views/permission/gather/distribute/components/data';
  import { listColor } from '@render/api/base/color';
  import { listPlate } from '@render/api/base/plate';

  interface Props {
    isOpenUnitOptions: any;
  }

  const props = withDefaults(defineProps<Props>(), {
    isOpenUnitOptions: () => ref(null),
  });

  const { language } = useMixins();

  const tabsValue = ref('detail');

  const crossactionRef = ref();

  const elDpDrawer = ref();

  const chooseItem = ref(null);

  const crossactionTableList = ref([]);

  const crossactionTableList2 = ref([]);

  const colorList = ref([]);

  const plateList = ref([]);

  const emit = defineEmits(['computedDistributeParameterFn','getParameterUnitListFn']);

  const close = () => {
    elDpDrawer.value.close();
  };

  const tabsChangeFn = (val) => {
    tabsValue.value = val;
  };

  const tableColumns = [
    // {
    //   width: 180,
    //   label: 'paramCode',
    //   key: 'paramCode',
    //   sorter: false
    // },
    {
      width: 120,
      label: 'parameterName',
      key: 'parameterName',
      sorter: false,
    },
    {
      width: 120,
      label: 'parameterCode',
      key: 'funId',
      sorter: false,
    },
    {
      width: 120,
      label: 'value',
      key: 'value',
      sorter: false,
    },
    {
      width: 120,
      label: 'distributeType',
      key: 'distributeType',
      sorter: false,
      render: (row) => {
        const text =
          distributeTypeList.find((item) => item.value === row.distributeType)?.label || '-';

        return h('span', {
          innerText: text,
        });
      },
    },
    {
      width: 120,
      label: 'delayTime',
      key: 'delayTime',
      sorter: false,
    },
    {
      width: 120,
      label: 'isSaveByMaterial',
      key: 'isSaveByMaterial',
      sorter: false,
      render: (row) => {
        const text =
          isSaveByMaterialList.find((item) => item.value === row.isSaveByMaterial)?.label || '-';

        return h('span', {
          innerText: text,
        });
      },
    },
    {
      width: 120,
      label: 'saveParameterName',
      key: 'saveParameterName',
      sorter: false,
    },
    {
      width: 120,
      label: 'saveParameterCode',
      key: 'saveParameterCode',
      sorter: false,
    },
  ];

  const descriptionsList: any = ref([
    {
      label: 'cartonTypeName',
      value: '',
    },
    {
      label: 'corrugatedTypeName',
      value: '',
    },
    {
      label: 'customShort',
      value: '',
    },
    {
      label: 'customName',
      value: '',
    },
    {
      label: 'customerNo',
      value: '',
    },
    {
      label: 'customerOrderNo',
      value: '',
    },
    {
      label: 'erpNo',
      value: '',
    },
    {
      label: 'materialName',
      value: '',
    },
    {
      label: 'materialCode',
      value: '',
    },
    {
      label: 'version',
      value: '',
    },
    {
      label: 'materialStandards',
      value: '',
    },
    {
      label: 'lid',
      value: '',
    },
    {
      label: 'nail',
      value: '',
    },
    {
      label: 'orderCode',
      value: '',
    },
    {
      label: 'orderNum',
      value: '',
    },
    {
      label: 'orderStatusName',
      value: '',
    },
    {
      label: 'outModeName',
      value: '',
    },
    {
      label: 'paperThickness',
      value: '',
    },
    {
      label: 'paperboardNum',
      value: '',
    },
    {
      label: 'paperSize',
      value: '',
    },
    {
      label: 'pileNum',
      value: '',
    },
    {
      label: 'outModeName',
      value: '',
    },
    {
      label: 'producedNum',
      value: '',
    },
    {
      label: 'scheduledStartTime',
      value: '',
    },
    {
      label: 'scheduledEndTime',
      value: '',
    },
    {
      label: 'templateNum',
      value: '',
      span: 3,
    },
    {
      label: 'remark',
      common: true,
      value: '',
      span: 3,
    },
  ]);

  const tableColumns2 = ref([
    {
      width: 120,
      label: 'printUnit',
      key: 'printUnit',
      sorter: false,
    },
    {
      width: 120,
      label: 'plateName',
      key: 'plateName',
      sorter: false,
      render: (row) => {
        const text = plateList.value.find((item) => item.id === row.plateId)?.plateName || '-';

        return h('span', {
          innerText: text,
        });
      },
    },
    {
      width: 120,
      label: 'colorName',
      key: 'colorName',
      sorter: false,
      render: (row) => {
        const text = colorList.value.find((item) => item.id === row.colorId)?.colorName || '-';

        return h('span', {
          innerText: text,
        });
      },
    },
    {
      width: 120,
      label: 'color',
      key: 'color',
      sorter: false,
      render({ color }) {
        return color
          ? h('span', {
              style: {
                backgroundColor: color,
                display: 'block',
                width: '24px',
                height: '24px',
                border: '1px solid #ddd',
              },
            })
          : '-';
      },
    },
    {
      width: 120,
      label: 'colorModel',
      key: 'colorModel',
      sorter: false,
      render: (row) => {
        const text = colorList.value.find((item) => item.id === row.colorId)?.colorModel || '-';

        return h('span', {
          innerText: text,
        });
      },
    },
  ]);

  const openFn = async (row) => {
    chooseItem.value = row;

    if (descriptionsList && descriptionsList.value && descriptionsList.value.length > 0) {
      for (const item of descriptionsList.value) {
        item.value = row[item.prop || item.label];
      }
    }

    await emit('computedDistributeParameterFn', row, (obj) => {
      if (obj) {
        const { priorityDistributionList, normalDistributionList } = obj;

        crossactionTableList.value = [...priorityDistributionList, ...normalDistributionList];
      } else {
        crossactionTableList.value = [];
      }
    });

    await emit('getParameterUnitListFn', row, (list) => {
      if (list) {
        crossactionTableList2.value = list || [];
      } else {
        crossactionTableList2.value = [];
      }
    });

    if (props.isOpenUnitOptions) {
      const [res1, res2] = await Promise.all([listColor(), listPlate()]);

      colorList.value = res1.data || [];

      plateList.value = res2.data || [];
    }

    tabsValue.value = 'detail';

    if (elDpDrawer && elDpDrawer.value && elDpDrawer.value.open) {
      elDpDrawer.value.open();
    }
  };
  defineExpose({ openFn });
</script>
<style lang="less" scoped>
  .order-drawer-descriptions {
    margin-top: 10px;
    :deep(.n-descriptions) {
      font-size: 16px;
    }
  }

  .order-drawer-tabs {
    :deep(.n-tabs-tab) {
      font-size: 16px;
    }
  }
  .footer {
    :deep(.n-button--default-type) {
      width: 136px !important;
      height: 48px;
      font-size: 20px;
    }
    :deep(.n-button--primary-type) {
      min-width: 136px !important;
      height: 48px;
      background: linear-gradient(180deg, #dcffe5 5%, #52c570 87%);
      border-radius: 0px;
      color: #4d4d4d;
      border: 0px solid #5d5d5d;
      font-size: 20px;
    }
    :deep(.n-button.n-button--default-type:hover) {
      transition: none;
      border: 1px solid #d4d6d9;
      background-color: #d4d6d9;
      --n-border-hover: 1px solid #d4d6d9 !important;
      --n-border-pressed: 1px solid #d4d6d9 !important;
      --n-border-focus: 1px solid #d4d6d9 !important;
      color: #4d5372;
    }
  }

  :deep(.n-button:not(.n-button--disabled):hover) {
    color: #4d4d4d;
  }
  :deep(.n-button:not(.n-button--disabled):focus) {
    color: #4d4d4d;
  }

  .drawer-header {
    .content {
      display: flex;
      width: 668px;
      height: 52px;
      background: #f0f0f0;
      border-radius: 4px;
      padding: 4px 12px;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      color: #222222;
      .label {
        width: 152px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .after {
        height: 20px;
        width: 1px;
        border-left: 1px solid #e6e8eb;
      }
      .activeClass {
        width: 152px;
        height: 44px;
        color: #fff;
        background: #307AFA;
        box-shadow: 0px 5px 5px 0px rgba(255, 106, 63, 0.1);
        border-radius: 4px;
      }
    }
  }
</style>
